<template>
	<div style="display: flex;flex-direction: column;" class="otherPage sustainableDevelopment greenDevelopment">
		<Header :selected="6"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bg_img? 'background:url('+bg_img+') no-repeat;background-size:cover; ':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="1" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg">
				<el-row :class="index%2 == 0?'odd':'even'" :gutter="greenGutter" v-for=" (item, index) in data">
					<el-col :span="24">
						<el-row :gutter="greenGutter">
							<div>
								<!-- @click="gotoInfo(item.id)" -->
								<el-col :span="2">&nbsp;</el-col>
								<el-col style="text-align: center;" v-if="index % 2 === 0" :xs="24" :sm="24" :md="8"
									:lg="8">
									<img :lazy="true" class="img" :src="item.coverImage"></img>
								</el-col>
								<el-col :xs="24" :sm="24" :md="12" :lg="12">
									<div class="title"> | {{item.title}}</div>
									<p v-html="item.content" class="dhcontent">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
								</el-col>
								<el-col style="text-align: center;" v-if="index % 2 === 1" :xs="24" :sm="24" :md="8"
									:lg="8">
									<img :lazy="true" class="img" :src="item.coverImage"></img>
								</el-col>
								<el-col :span="2">&nbsp;</el-col>
							</div>
						</el-row>
					</el-col>
				</el-row>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		csustainableDevelopmentMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bg_img: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: csustainableDevelopmentMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('sustainableDevelopment'),
						to: '/sustainableDevelopment'
					},
					{
						label: this.$t('greenDevelopment'),
						to: '/greenDevelopment'
					}
				],
				hoverIndex: -1,
				data: [],
				greenGutter: 40
			};
		},
		computed: {},
		created() {},
		mounted() {
			if (window.innerWidth <= 768) {
				this.greenGutter = 0;
			}else
			{
				this.greenGutter = 40;
			}
			this.bindBg();
			this.bindGreenDevelopmentPage();
		},
		methods: {
			/**
			 * (1)	获取绿色发展列表
			 * http://127.0.0.1:9999/openApi/develop/getGreenDevelopmentPage
			 */
			bindGreenDevelopmentPage() {
				let params = {};
				let that = this;
				that.$request.getGreenDevelopmentPage(params).then(res => {
					this.data = res.data
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});
			},
			/**
			 * (1)(1)	获取绿色发展顶部背景-待完善，接口未提供
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getGreenDevelopmentTopImage(params).then(res => {
					this.bg_img = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});
			},
			gotoInfo(id) {
				this.$router.push({
					name: this.$t('greenDevelopmentInfo'),
					query: {
						id: id
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/sustainableDevelopment/sustainableDevelopment.css");

	.odd {
		padding: 30px 0;
		cursor: pointer;

		/* transition: transform 0.3s ease; */
		/* 添加过渡效果 */
		margin-bottom: 5px;
	}

	.odd:hover {
		background-color: #F6F6F6;
		/* transform: scale(0.96) */
	}

	.odd:hover .img {
		transform: scale(1.05)
	}


	.even:hover {
		background-color: #F6F6F6;
		/* transform: scale(0.96) */
	}

	.even:hover .img {
		transform: scale(1.05)
	}

	.odd .date .span {
		float: left;

	}

	.even {
		background-color: #F6F6F6;
		padding: 30px 0;
		cursor: pointer;
		transition: transform 0.3s ease;
		margin-bottom: 5px;
	}

	.img {
		max-width: 500px;
		width: 100%;
		height: 28vh;
		transition: transform 0.3s ease;
	}

	.date {
		height: 44px;
		margin: 0 0 15px 0 !important;
	}

	.date .span {
		width: 143px;
		background: #0484D7;
		font-size: 22px;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 44px;
		text-align: center !important;
	}

	.greenDevelopment .title {
		color: #0484D7;
		font-size: 26px;
		font-weight: 530;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 0px 0 8px 0 !important;
		height: 5vh;
		line-height: 5vh;
	}

	.dhcontent {
		overflow: hidden;
		/* 设置超出部分隐藏 */
		font-size: 16px;
		color: #343434;
		font-weight: 400;
		height: 180px;
		line-height: 30px;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 6;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.even .title {
		text-align: right;
	}

	.even .date {
		width: 100%;
		background: #F6F6F6;
	}

	.even .date .span {
		float: right;
	}

	.triangle-left {
		width: 0;
		height: 0;
		border-top: 11px solid transparent;
		border-right: 11px solid #0484D7;
		border-bottom: 11px solid transparent;
		float: left;
		margin-top: 11px;
	}

	.triangle-right {
		width: 0;
		height: 0;
		border-top: 11px solid transparent;
		border-left: 11px solid #0484D7;
		border-bottom: 11px solid transparent;
		float: right;
		margin-top: 11px;
	}

	@media (max-width: 1024px) {

		.greenDevelopment .img {
			max-width: 100%;
			width: 100%;
			height: 40vh;

		}
	}

	@media (max-width: 1366px) {

		.dhcontent {
			height: 150px;
			line-height: 24px;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 12px;
			margin-bottom: 20px;

		}
	}


	.content_bg {
		margin: 0px auto;
		padding: 50px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(2560/1920)*264);
			width: calc(1px*(2560/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(2560/1920)*264);
			width: calc(1px*(2560/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(2320/1920)*264);
			width: calc(1px*(2320/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(2120/1920)*264);
			width: calc(1px*(2120/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.greenDevelopment .img {
			height: 264px;
			width: calc(1px*(264 * 540 / 350));
		}



	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(1720/1920)*264);
			width: calc(1px*(1720/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(1520/1920)*264);
			width: calc(1px*(1720/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}

		.greenDevelopment .img {
			height: calc(1px*(1366/1920)*264);
			width: calc(1px*(1366/1920)*264 * 540 / 350);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 768px) {
		.content_bg {
			width: calc(768px * 0.8);
		}

		.greenDevelopment .img {
			width: calc(1px*(768 * 0.8));
			height: calc(1px*(768 * 0.8 * 350 / 540));
		}
	}

	@media (max-width: 638px) {
		.content_bg {
			width: calc(638px * 0.8);
		}

		.greenDevelopment .img {
			width: calc(1px*(638 * 0.8));
			height: calc(1px*(638 * 0.8 * 350 / 540));
		}
	}

	@media (max-width: 440px) {
		.content_bg {
			width: calc(430px * 0.8);
			padding: 5px;
		}

		.greenDevelopment .img {
			width: calc(1px*(430 * 0.8)) !important;
			height: calc(1px*(430 * 0.8 * 350 / 540));
		}

		.even {
			padding: 30px 0px;
		}

		.greenDevelopment .title {
			margin: 8px 0 8px 0 !important;
		}
		.dhcontent {
		    height: max-content;
		    line-height: 24px;
		    text-overflow: ellipsis;
		    display: -webkit-box;
		    -webkit-line-clamp: inherit;
		    -webkit-box-orient: vertical;
		    overflow: unset;
		    font-size: 12px;
		    margin-bottom: 20px;
		}
	}
</style>
